<template>
  <div>
    <el-form :inline="true" :model="f1" class="demo-form-inline">
      <el-form-item label="泵站名称">
        <el-input v-model="f1.pumpname"></el-input>
      </el-form-item>
      <el-form-item label="泵站型号">
        <el-select v-model="f1.pumptype" placeholder="请选择">
          <el-option
            v-for="pump in pumplist"
            :label="pump.pumptype"
            :value="pump.pumptype"
            :key="pump.pumptype"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人">
        <el-select v-model="f1.userId" placeholder="请选择">
          <el-option
            v-for="item in users"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="reset">清空</el-button>
        <el-button type="primary" @click="addp">添加信息</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="pumps" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="id" label="" width="80" v-if="false">
      </el-table-column>
      <el-table-column prop="pumpname" label="泵站名称" width="120">
      </el-table-column>
      <el-table-column prop="pumptype" label="泵站型号" width="120">
      </el-table-column>
      <el-table-column prop="gas" label="瓦斯浓度" width="120">
      </el-table-column>
      <el-table-column prop="tp" label="抽放负压" width="120">
      </el-table-column>
      <el-table-column prop="intpower" label="入口功率" width="120">
      </el-table-column>
      <el-table-column prop="outpower" label="出口功率" width="120">
      </el-table-column>
      <el-table-column prop="temperature" label="温度(℃)" width="120">
      </el-table-column>
      <el-table-column prop="name" label="负责人" width="120">
      </el-table-column>
      <el-table-column prop="userId" label="负责人" width="120" v-if="false">
      </el-table-column>
      <el-table-column prop="pumpsize" label="泵站类型" width="120">
      </el-table-column>
      <el-table-column fixed="right" label="修改" width="200">
        <template slot-scope="scope">
          <el-button type="warning" @click="check(scope.row)">修改</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="5"
      @current-change="goto"
    >
    </el-pagination>
    <!-- 添加修改页面弹出框 -->
    <el-dialog title="修改站点数据" :visible.sync="dialogUpdateVisible">
      <el-form :model="update" label-width="100px" ref="update">
        <el-form-item label="" prop="id" v-if="false">
          <el-input v-model="update.id"></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item
              label="泵站名称"
              prop="pumpname"
              style="width: 300px"
            >
              <el-input v-model="update.pumpname"></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item
              label="泵站型号"
              prop="pumptype"
              style="width: 300px"
            >
              <el-input v-model="update.pumptype"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item label="瓦斯浓度" prop="gas" style="width: 300px">
              <el-input
                v-model="update.gas"
                placeholder="必须为数字值且保留两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="抽放负压" prop="tp" style="width: 300px">
              <el-input
                v-model="update.tp"
                placeholder="必须为数字值且保留两位小数"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item
              label="入口功率"
              prop="intpower"
              style="width: 300px"
            >
              <el-input
                v-model="update.intpower"
                placeholder="必须为数字值且保留两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item
              label="出口功率"
              prop="outpower"
              style="width: 300px"
            >
              <el-input
                v-model="update.outpower"
                placeholder="必须为数字值且保留两位小数"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="温度" prop="temperature" style="width: 300px">
              <el-input
                v-model="update.temperature"
                placeholder="必须为数字值且保留两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="负责人" prop="userId" style="width: 300px">
              <el-select v-model="update.userId" placeholder="请选择">
                <el-option
                  v-for="user in users"
                  :label="user.name"
                  :value="user.id"
                  :key="user.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>

        <el-form-item label="泵站类型" prop="pumpsize" style="width: 300px">
          <el-input
            v-model="update.pumpsize"
            placeholder="大，中，小"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeStatus">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加页面 -->
    <el-dialog title="添加站点数据" :visible.sync="dialogaddVisible">
      <el-form :model="add" label-width="100px" ref="add" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item label="泵站名称" prop="pumname" style="width: 300px">
              <el-input v-model="add.pumpname"></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item
              label="泵站型号"
              prop="pumptype"
              style="width: 300px"
            >
              <el-input v-model="add.pumptype"></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="瓦斯浓度" prop="gas" style="width: 300px">
              <el-input
                v-model="add.gas"
                placeholder="保留小于等于两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="抽放负压" prop="tp" style="width: 300px">
              <el-input
                v-model="add.tp"
                placeholder="保留小于等于两位小数"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item
              label="入口功率"
              prop="intpower"
              style="width: 300px"
            >
              <el-input
                v-model="add.intpower"
                placeholder="保留小于等于两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item
              label="出口功率"
              prop="outpower"
              style="width: 300px"
            >
              <el-input
                v-model="add.outpower"
                placeholder="保留小于等于两位小数"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10"
            ><el-form-item label="温度" prop="temperature" style="width: 300px">
              <el-input
                v-model="add.temperature"
                placeholder="保留小于等于两位小数"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="10"
            ><el-form-item label="负责人" prop="userId" style="width: 300px">
              <el-select v-model="add.userId" placeholder="请选择">
                <el-option
                  v-for="user in users"
                  :label="user.name"
                  :value="user.id"
                  :key="user.id"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-form-item label="泵站类型" prop="pumpsize" style="width: 300px">
          <el-select v-model="add.pumpsize" placeholder="请选择">
            <el-option value="大"></el-option>
            <el-option value="中"></el-option>
            <el-option value="小"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addpump">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        gas: [
          { required: true, message: "不能为空" },
          { type: "integer", message: "请输入数字类型", trigger: "change" },
        ],
        tp: [
          { required: true, message: "不能为空" },
          { type: "integer", message: "请输入数字类型", trigger: "change" },
        ],
        intpower: [
          { required: true, message: "不能为空" },
          { type: "integer", message: "请输入数字类型", trigger: "change" },
        ],
        outpower: [
          { required: true, message: "不能为空" },
          { type: "integer", message: "请输入数字类型", trigger: "change" },
        ],
        temperature: [
          { required: true, message: "不能为空" },
          { type: "integer", message: "请输入数字类型", trigger: "change" },
        ],
      },
      f1: {
        pumpname: "",
        pumptype: "",
        userId: "",
        pageIndex: 1,
      },
      pumplist: {},
      pumps: [],
      total: 100,
      users: {},
      dialogUpdateVisible: false,
      update: {
        id: 0,
        pumpname: "",
        pumptype: "",
        gas: 0,
        tp: 0,
        intpower: 0,
        outpower: 0,
        temperature: 0,
        userId: 0,
        name: "",
        pumpsize: "",
      },
      dialogaddVisible: false,
      add: {},
    };
  },
  methods: {
    goto(currentpage) {
      this.f1.pageIndex = currentpage;
      console.log(this.f1.pageIndex, currentpage);
      this.getpump();
    },
    onSubmit() {
      this.getpump();
    },
    getpump() {
      this.axios.post("/gms/getpump", this.f1).then((res) => {
        console.log(res.data);
        this.pumps = res.data.data.list;
        console.log(this.pumps);
        this.f1.pageIndex = res.data.data.pageNum;
        this.total = res.data.data.total;
      });
    },
    getAllUser() {
      this.axios.get("/gms/getusers").then((res) => {
        console.log(res.data.data);
        this.users = res.data.data;
        console.log(this.users);
      });
    },
    check(pump) {
      this.dialogUpdateVisible = true;
      this.update.id = pump.id;
      this.update.pumpname = pump.pumpname;
      this.update.pumptype = pump.pumptype;
      this.update.gas = pump.gas;
      this.update.tp = pump.tp;
      this.update.intpower = pump.intpower;
      this.update.outpower = pump.outpower;
      this.update.temperature = pump.temperature;
      this.update.name = pump.name;
      this.update.pumpsize = pump.pumpsize;
      this.update.userId = pump.userId;
    },
    changeStatus() {
      this.axios.post("/gms/updatepump", this.update).then((res) => {
        if (res.data.code == 200) {
          this.dialogUpdateVisible = false;
          this.getpump();
          (this.update.id = ""),
            (this.update.pumpname = ""),
            (this.update.pumptype = ""),
            (this.update.gas = ""),
            (this.update.tp = ""),
            (this.update.intpower = ""),
            (this.update.outpower = ""),
            (this.update.temperature = ""),
            (this.update.name = ""),
            (this.update.pumpsize = ""),
            (this.update.userId = "");
          this.$message({
            message: "成功",
            offset: 150,
            duration: 1000,
            type: "success",
          });
        } else {
          this.$message.error({
            message: "失败",
            offset: 150,
            duration: 1000,
          });
        }
      });
    },
    del(id) {
      this.axios
        .get("/gms/delpump", {
          params: {
            id: id,
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            this.getpump();
            this.$message({
              message: "成功",
              offset: 150,
              duration: 1000,
              type: "success",
            });
          } else {
            this.$message.error({
              message: "失败",
              offset: 150,
              duration: 1000,
            });
          }
        });
    },
    getAllpump() {
      this.axios.get("/gms/getallpump").then((res) => {
        this.pumplist = res.data.data;
      });
    },
    reset() {
      (this.f1.pumpname = ""),
        (this.f1.pumptype = ""),
        (this.f1.userId = ""),
        (this.f1.pageIndex = 1),
        this.getpump();
    },
    addp() {
      this.dialogaddVisible = true;
    },
    addpump() {
      this.axios.post("/gms/addpump", this.add).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "成功",
            offset: 150,
            duration: 1000,
            type: "success",
          });
          this.getpump();
          this.dialogaddVisible = false;
          this.add = "";
        }
      });
    },
  },
  created() {
    this.getAllUser();
    this.getpump();
    this.getAllpump();
  },
};
</script>
<style scoped>
</style>